<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKECHERS-商品详情页-女子鞋类</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        /* .content {
            height: 3000px;
        } */
        
        .content-con {
            height: 860px;
        }
        
        .content-con .title {
            font-size: 18px;
            color: #434343;
            margin-bottom: 66px;
            cursor: pointer;
            width: 295px;
        }
        
        .content-con .title span:nth-of-type(1) {
            width: 20px;
            height: 14px;
            display: inline-block;
            background: url(img/spritecow.png) no-repeat -30px -5px;
            cursor: pointer;
        }
        
        .contentdetail {
            width: 92%;
            background: wheat;
            margin: 0 auto;
        }
        
        .contentdetail .detaillist {
            width: 100px;
            height: 530px;
            float: left;
        }
        
        .contentdetail .detaillist li {
            width: 98px;
            height: 98px;
            border: 1px solid #c9c9c9;
            margin-bottom: 15px;
            cursor: pointer;
            /* margin: 3px 26px; */
        }
        
        .contentdetail .detaillist li img {
            width: 100%;
        }
        
        .contentdetail .bigimg {
            width: 708px;
            height: 708px;
            border: 1px solid #c9c9c9;
            float: left;
            margin-left: 30px;
        }
        
        .contentdetail .bigimg img {
            width: 100%;
            cursor: pointer;
        }
        
        .detailtext {
            width: 530px;
            /* height: 645px; */
            float: left;
            margin-left: 20px;
        }
        
        .englishname {
            margin-top: 22px;
            margin-bottom: 18px;
            font-size: 28px;
            font-weight: bold;
        }
        
        .chinesename {
            font-size: 20px;
            color: #ccc;
            display: block;
            margin-bottom: 26px;
        }
        
        .price {
            font-size: 35px;
            padding-bottom: 24px;
            border-bottom: 1px solid #c9c9c9;
            width: 530px;
            /* display: inline-block; */
            box-sizing: border-box;
        }
        
        .number {
            color: #333;
            margin-top: 19px;
            margin-bottom: 26px;
        }
        
        #selectsize {
            width: 270px;
            height: 44px;
            border: 1px solid #c9c9c9;
            float: left;
            margin-right: 23px;
            margin-left: 30px;
            margin-top: 19px;
            margin-bottom: 30px;
        }
        
        .sub,
        .add {
            width: 44px;
            height: 44px;
            border: 1px solid #c9c9c9;
            background: #fff;
        }
        
        .amount {
            width: 150px;
            height: 44px;
            /* display: inline-block; */
            float: left;
            margin-top: 19px;
            margin-bottom: 30px;
        }
        
        .num {
            line-height: 37px;
            width: 37px;
            height: 42px;
            display: inline-block;
            border-top: 1px solid #c9c9c9;
            border-bottom: 1px solid #c9c9c9;
            text-align: center;
            font-size: 18px;
        }
        
        .addcart {
            width: 267px;
            height: 54px;
            color: white;
            background: #022d53;
            border-radius: 6px;
            margin-right: 10px;
            margin-left: 30px;
            border: none;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        .gobuy {
            width: 267px;
            height: 54px;
            color: white;
            background: #ff233e;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        .introduce {
            height: 1000px;
            border-top: 1px solid #000;
            width: 92%;
            margin: 0 auto;
            border-bottom: 1px solid #c9c9c9;
        }
        
        .introduce-left {
            width: 541px;
            float: left;
            height: 782px;
        }
        
        .introduce-left img {
            width: 100%;
        }
        
        .introduce-right {
            width: 856px;
            float: left;
            margin-top: 55px;
        }
        
        .introduce-right p {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 23px;
            margin-top: 32px;
        }
        
        .introduce-right .one {
            font-size: 38px;
        }
        
        .introduce-right span {
            font-size: 18px;
            color: #333;
            line-height: 26px;
        }
        
        .introduce-right i {
            font-style: normal;
            font-style: 14px;
            color: #999999;
            line-height: 25px;
        }
        
        .box {
            width: 250px;
            height: 80px;
            margin: 80px auto;
            /* background-color: orange; */
            overflow: hidden;
        }
        
        .item {
            width: 250px;
            height: 80px;
            margin-top: 30px;
        }
        
        .word {
            float: left;
        }
        
        .starlist {
            float: left;
            width: 100px;
            margin-left: 10px;
        }
        
        .star {
            width: 14px;
            height: 14px;
            display: inline-block;
            background-image: url(img/commstar.png);
            background-position: -1px -1px;
            cursor: pointer;
            position: relative;
        }
        
        .face {
            background-image: url(img/face.png);
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            top: -18px;
            left: -1px;
            display: none;
        }
        
        #focus {
            background-position: -1px -17px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg"" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="content-con">
            <div class="title "><span></span><span>&nbsp;女子</span>|<span>最新活动</span>|<span>最新上市</span>|SPLIT</div>
            <div class="contentdetail">
                <ul class="detaillist">
                    <li><img src="img/type1.jpg" alt=""></li>
                    <li><img src="img/type2.jpg" alt=""></li>
                    <li><img src="img/type3.jpg" alt=""></li>
                    <li><img src="img/type0.jpg" alt=""></li>
                    <li><img src="img/type5.jpg" alt=""></li>
                </ul>
                <div class="bigimg">
                    <img src="img/big1.jpg" alt="">
                </div>
                <div class="detailtext">
                    <img src="img/new.png" alt="">
                    <p class="englishname"></p>
                    <span class="chinesename"></span>
                    <p>￥<span class="price"></span></p>
                    <p class="number"></p>
                    <p class="color"></p>
                </div>
            </div>
            <select name="" id="selectsize">
                <!-- <option value="">尺码</option> -->
                <option >35</option>
                <option >36</option>
                <option >37</option>
                <option >38</option>
                <option >39</option>
            </select>
            <div class="amount">
                <button class="sub">-</button>
                <span class="num">1</span>
                <button class="add">+</button>
            </div>
            <p>
                <button class="addcart">加入购物车</button>
                <button class="gobuy">立即购买</button>
            </p>
            <span style="margin-left:30px;color: #c9c9c9;font-size: 15px;display: inline-block;width: 530px;text-align: right;border-bottom: 1px solid #c9c9c9;cursor: pointer;">分享&nbsp;&nbsp;&nbsp;&nbsp;手机购买</span>
            <div class="box">
                <div class="item">
                    <span class="word">给个评价吧</span>
                    <div class="starlist">
                        <span class="star"><i class="face"></i></span>
                        <span class="star"><i class="face"></i></span>
                        <span class="star"><i class="face"></i></span>
                        <span class="star"><i class="face"></i></span>
                        <span class="star"><i class="face"></i></span>
                    </div>
                    <span class="score">0分</span>
                </div>
            </div>
        </div>
        <div class="introduce">
            <div class="introduce-left">
                <img src="" alt="">
            </div>
            <div class="introduce-right">
                <p class="one"></p>
                <span class="one-text"></span>
                <p class="two"></p>
                <span class="two-text"></span>
                <p class="three"></p>
                <span class="three-text"></span>
                <p class="four"></p>
                <span class="four-text"></span>
                <p class="five"></p>
                <span class="five-text"></span><br><br><br>
                <i>敬请注意，同款但不同配色的商品有可能在材质等方面存在些许差异；商品图片均为官方拍摄，手机或电脑等其他显示设备可能会造成色差；页面显示的尺码数据均为手工测量，与收到商品可能存在一定的误差值属于正常情况；本页面中的商品介绍内容仅供参考，商品具体信息请以收到的实物为准。另，内衣类商品不提供试穿服务，商品一经签收无质量问题不提供退换货服务，给您造成的不便望您谅解。</i>
            </div>
        </div>

    </div>
    </div>
    <!-- 底部 -->
    <div class="bottom ">
        <div class="btop ">
            <div class="top-list ">
                <span><i>会员</i></span>
                <span><i>门店</i></span>
            </div>
        </div>
        <div class="middle ">
            <div class="copy ">
                <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="../img/wechatpay_pc.png " alt=" " >&nbsp;&nbsp;
                <img src="../img/alipay_pc.png " alt=" ">&nbsp;&nbsp;
                <img src="../img/unionpay_pc.png " alt=" ">&nbsp;&nbsp;
            </span>
            </div>
            <div class="china "><img src="../img/cn.png " alt=" ">&nbsp;&nbsp;中国</div>
        </div>
        <div class="lastmessage ">
            <div class="lastL ">
                <ul>
                    <b>联系客服</b>
                    <li>团购申请</li>
                    <li>在线客服</li>
                    <li>网站地图</li>
                </ul>
                <ul>
                    <b>我的账户</b>
                    <li>会员权利</li>
                    <li>我的信息</li>
                    <li>我的订单</li>
                    <li>我的积分</li>
                    <li>我的优惠券</li>
                    <li>收件地址</li>
                </ul>
                <ul>
                    <b>帮助中心</b>
                    <li>订单异常</li>
                    <li>发票</li>
                    <li>支付方式</li>
                    <li>退货说明</li>
                    <li>找回密码</li>
                    <li>注册与登录</li>
                </ul>
                <ul>
                    <b>关于斯凯奇</b>
                    <li>斯凯奇故事</li>
                    <li>联系我们</li>
                    <li>免责声明</li>
                    <li>隐私保护</li>
                    <li>服务协议</li>
                    <li>投资关系</li>
                    <li>招贤纳士</li>
                </ul>
            </div>
            <div class="lastR ">
                <b>关注我们</b>
                <p class="wechat "><img src="../img/weibo.png " alt=" "><img src="../img/wechat.png " alt=" ">
                    <img src="../img/QRCode.jpg " alt=" " class="code " id="template "></p>
                <i>获取斯凯奇最新资讯</i>
                <div class="email "> <input type="email "> <em></em></div>
            </div>
        </div>
    </div>
    <div class="footer ">
        <div class="footer-con ">
            <div class="footL ">
                <p>广州市利德丹贸易有限公司保留所有权利</p>
                <p><span style="color:#002b57 ">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
            </div>
            <div class="footR ">
                <img src="../img/pc_kx.png " alt=" ">
                <img src="../img/pc_cx.png " alt=" ">
                <img src="../img/pc_ga.png " alt=" ">
                <img src="../img/pc_zzN.png " alt=" ">
            </div>

        </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/common.js"></script>

    <script>
        localStorage.getItem('englishname')
        localStorage.getItem("img")
        localStorage.getItem("price")
        localStorage.getItem("number")
        localStorage.getItem("selectsize")
        localStorage.getItem("num")
        let userid = sessionStorage.getItem("userid ")
            // console.log(userid)



        $(".title").click(function() {
            location.href = `${address}/goodsdetail.html`
        })
        $(".top-shop").click(function() {
                location.href = `${address}/cartlist.html`
            })
            //图片定向
        let detaillist = $(".detaillist li img")
        let bigimg = $(".bigimg img")
        for (let i = 0; i < detaillist.length; i++) {
            detaillist[i].onclick = function() {
                bigimg[0].src = detaillist[i].src
            }
        }
        //五星好评
        let starlist = document.querySelectorAll(".starlist .star ")
        let facelist = document.querySelectorAll(".starlist .face")
        let score = document.querySelectorAll(".score")[0]
        let staritem = document.querySelectorAll(".starlist")[0]
        for (let i = 0; i < starlist.length; i++) {
            starlist[i].setAttribute("index", i)
        }

        function bindEvent(nodelist, eventType, fn) {
            for (let i = 0; i < nodelist.length; i++) {
                nodelist[i][eventType] = fn
            }
        }
        bindEvent(starlist, "onmouseover", function() {
            for (let i = 0; i < starlist.length; i++) {
                starlist[i].id = ''
                staritem.querySelectorAll(".face")[i].style.display = "none"
            }
            var index = this.getAttribute("index")
            for (i = 0; i <= index; i++) {
                starlist[i].id = "focus"
            }
            this.firstChild.style.display = "block"
            this.firstChild.style.backgroundPosition = (index * 20) - 80 + "px"
        })
        bindEvent(starlist, "onclick", function() {
            for (let i = 0; i < starlist.length; i++) {
                var index = this.getAttribute("index")
                staritem.querySelectorAll(".face")[i].style.display = "none"
                score.innerHTML = +index + 1 + '分'
                score.style.color = "red"
            }
        })

        //上传数据


        $.ajax({
                url: `${address}/getcontent`,
                data: {
                    id: location.href.parseUrl().id
                },
                success(data) {
                    $('.introduce-left img').attr("src", data.img)
                    $(".bigimg img").attr("src", data.img)
                    $(".englishname").html(data.englishname)
                    $(".chinesename").html(data.chinesename)
                    $(".price").html(`${data.price}`)
                    $(".one").html(data.one)
                    $(".two").html(data.two)
                    $(".three").html(data.three)
                    $(".four").html(data.four)
                    $('.five').html(data.five)
                    $(".one-text").html(data.text1)
                    $(".two-text").html(data.text2)
                    $(".three-text").html(data.text3)
                    $(".four-text").html(data.text4)
                    $(".five-text").html(data.text5)
                    $(".color").html(`颜色:${data.color}`)
                    $(".number").html(`货号：${data.number}`)
                        // console.log(data)
                }
            })
            //数量点击
        let add = $(".add")
        let sub = $(".sub")
        let num = document.querySelectorAll(".num")[0]
        let amount = $(".amount")



        sessionStorage.setItem("goodsid", location.href.parseUrl().id)
            // sessionStorage.setItem("goodsid", parseUrl().id)
        window.onclick = function(event) {
            let _this = event.target || event.srcElement
            if (_this.className === "add") {
                num.innerHTML = +num.innerHTML + 1

            }
            if (_this.className === "sub") {
                if (+num.innerHTML === 1) {
                    return
                }
                num.innerHTML = +num.innerHTML - 1
            }
            let img = $(".bigimg").find("img")
            let price = $(".detailtext .price").html()
            let goodscount = $(".num")[0].innerHTML
            let size = $("#selectsize").val()
            if (_this.className === "addcart") {

                if (userid == null) {
                    alert("请先登录或注册个账号吧")
                    location.href = `${address}/login.html`
                } else {
                    // $.ajax({
                    //     url: `${address}/insertgoods`,
                    //     data: {
                    //         size: size,
                    //         count: goodscount,
                    //         goodsid: location.href.parseUrl().id,
                    //         userid: userid
                    //     },
                    //     success(data) {

                    //         location.href = `${address}/cartlist.html`

                    //     }
                    // })
                    $.ajax({
                        url: `${address}/insertbuyer`,
                        data: {
                            size: size,
                            count: goodscount,
                            goodsid: location.href.parseUrl().id,
                            userid: userid,
                            chinesename: $(".chinesename").html(),
                            englishname: $(".englishname").html(),
                            color: $(".color").html(),
                            price: price,
                            img: img.attr("src")
                        },
                        success(data) {
                            location.href = `${address}/cartlist.html`
                        }
                    })

                }
            }
            if (_this.className === "gobuy") {
                location.href = `${address}/order.html`
            }
        }
    </script>
    </script>
</body>

</html>